---
type: tutorial
unitTitle: 初めてのAstroサイトの作成とデプロイ
title: 'ユニット1の導入 - 準備'
description: >-
  「初めてのAstroブログ」チュートリアル -
  開発環境を準備し、初めてのAstroサイトを作成してデプロイする
i18nReady: true
---

import Checklist from '~/components/Checklist.astro';
import Box from '~/components/tutorial/Box.astro';
import { Steps } from '@astrojs/starlight/components';

これから何を作成するのかわかったところで、必要なツールを準備していきましょう！

このユニットでは、開発環境の準備とNetlifyへのデプロイ方法を説明します。すでに開発環境やワークフローについて理解している場合は、[ユニット2](/ja/tutorial/2-pages/)に進んでください。

:::tip[stackblitzを使う]

チュートリアルをオンラインのコードエディターで進めたいですか？
<details>
<summary>以下の手順に従って、ユニット2に進んでください！</summary>

**StackBlitzを設定する**

<Steps>
1. [astro.new](https://astro.new)にアクセスし、「Empty Project」テンプレートの「Open in StackBlitz」ボタンをクリックします。

2. 右上にある「Sign in」ボタンをクリックして、GitHubの認証情報を使いログインします。

3. StackBlitzのエディタウィンドウの左上にある「Fork」をクリックして、テンプレートを保存します。

4. プロジェクトが読み込まれるまで待つと、「Empty Project」スターターのライブプレビューが表示されます。
</Steps>

**変更を加える**

ファイルペインに`src/pages/index.astro`があるはずです。これをクリックして開き、[初めてのAstroコードを書く](/ja/tutorial/1-setup/3/)に従ってこのファイルを変更します。

**GitHubリポジトリを作成する**

<Steps>
1. ファイルリストの一番上にある<kbd>Connect Repository</kbd>ボタンを押して、新しいリポジトリの名前を入力し、<kbd>Create repo & push</kbd>をクリックします。

2. GitHubにコミットすべき変更があると、ワークスペースの左上に「Commit」ボタンが表示されます。これをクリックすると、コミットメッセージを入力してリポジトリを更新できます。
</Steps>

**サイトをデプロイする**

Netlifyにデプロイする場合は、[サイトをウェブにデプロイする](/ja/tutorial/1-setup/5/)に進んでください。その他の場合は[ユニット2](/ja/tutorial/2-pages/)に進み、Astroでの開発を始めてください！

</details>
:::

## これから向かう場所

このユニットでは、**GitHubに保存**され、**Netlifyに接続**された**新しいプロジェクトの作成**をおこないます。

コードを書いている途中で、変更を定期的にGitHubにコミットします。Netlifyは、GitHubリポジトリ内のファイルを使用してウェブサイトをビルドし、誰でも閲覧できる一意のアドレスでインターネット上に公開します。

GitHubに変更をコミットするたびに、Netlifyに通知が送信されます。すると、Netlifyは自動的にサイトを再ビルドし、変更を反映した上でサイトを再公開します。


<Box icon="check-list">
## チェックリスト

<Checklist>
- [ ] Astroプロジェクトの開発環境を準備する用意ができた！
</Checklist>
</Box>
